第 28 章 轻量发布：做好的页面发给同事打不开
你花了半小时让 Agent 做了一个漂亮的仪表盘页面，效果很好。你把 HTML 文件发给同事，对方双击打开——白屏。你发给他的是本地路径，指向的是你电脑上的文件，别人的电脑上当然不存在这些路径。
这是 AI 生成 HTML 页面后最常见的尴尬：东西做好了，但发不出去。本地文件、localhost 链接，这些只在你自己的机器上有意义。WorkBuddy 的轻量发布功能，就是为了把这个"最后一公里"打通。
为什么要轻量发布
先说清楚问题出在哪里。Agent 生成的 HTML 页面，在本地预览时一切正常。但分享出去时会遇到几类障碍：
| 障碍 | 原因 | 表现 |
|---|---|---|
| 发文件对方打不开 | 本地路径或 localhost 只指向你的电脑 | 白屏、404、资源加载失败 |
| 需要部署才可访问 | 传统方式要上传到服务器、配置域名 | 门槛高，不会操作 |
| 改了内容要重新发 | 每次更新都要重新发文件 | 版本混乱，不知道哪份最新 |
| 数据写在页面里 | 数据和页面耦合在一起 | 改数据要改代码 |
轻量发布的核心思路是：不需要服务器、不需要域名、不需要懂部署。一键把本地页面变成在线链接，任何人拿到链接就能在浏览器里打开。
一键发布为在线链接
发布流程
在 WorkBuddy 中打开你要发布的页面，点击"分享"按钮，切换到"发布"标签页，打开"发布为网站"开关。页面会立即发布为一个在线链接。
发布后的链接格式为 https://workbuddy.link/p/{pageID}，任何人拿到这个链接都可以直接在浏览器中访问，不需要安装 WorkBuddy，也不需要登录。
| 步骤 | 操作 |
|---|---|
| 1 | 打开要发布的页面 |
| 2 | 点击"分享"按钮 |
| 3 | 切换到"发布"标签页 |
| 4 | 打开"发布为网站"开关 |
| 5 | 复制生成的在线链接分享给他人 |
发布的同时，页面也会自动存入资料库（见第 26 章）。也就是说，发布动作同时完成了两件事：让页面在线可访问、让文件在资料库中有备份。
分享渠道
除了复制链接直接分享，发布后还支持两种额外的分享方式：
- 分享到微信：直接发送链接到微信对话，对方点击即可打开。
- 生成二维码：生成二维码图片，适合线下场景——开会时投屏扫码、海报上印二维码。
把这份项目仪表盘页面发布为在线链接，同时生成二维码。
链接发到项目群，二维码放在周会投屏上方便大家扫码查看。更新和重新发布
发布后发现需要修改怎么办？在 WorkBuddy 中修改页面后，重新发布即可——链接不会变，同一个 URL 会更新为最新版本。对方刷新页面就能看到最新内容，不需要重新发链接。
| 对比 | 传统发文件 | WorkBuddy 轻量发布 |
|---|---|---|
| 分享方式 | 发本地 HTML 文件 | 发在线链接 |
| 对方能否打开 | 依赖本地路径，通常打不开 | 任何浏览器可直接打开 |
| 更新方式 | 改完重新发文件，版本混乱 | 重新发布，链接不变，自动更新 |
| 数据分离 | 数据写在页面里，改数据要改代码 | HTML+CSV 分离，改数据只改 CSV |
HTML + CSV 搭建轻应用
单纯发布一个 HTML 页面，适合"做出来好看"的场景。但如果页面里的数据需要持续更新——比如库存表、任务看板、销售记录——把数据写死在 HTML 里就很不合理了。
WorkBuddy 支持 HTML + CSV 的组合方式，把页面和数据分开：HTML 负责展示和操作，CSV 负责存储数据。两者通过数据引用关联，改 CSV 里的数据，HTML 页面刷新后自动更新。
数据与页面分离
| 层级 | 文件 | 职责 |
|---|---|---|
| 展示层 | HTML | 页面布局、交互逻辑、视觉样式 |
| 数据层 | CSV | 结构化数据存储（产品、订单、库存等） |
这种分离的好处是分工明确。要改页面长什么样，只动 HTML；要更新数据，只改 CSV。两者互不干扰。
搭建一个个人工作台页面：
HTML 部分：顶部显示今日待办数量、本周完成率，中间是待办列表，底部是快速录入框。
CSV 部分：存储待办事项，字段包含事项名称、优先级、截止日期、状态、完成时间。
数据更新：在 CSV 中新增或修改待办后，刷新 HTML 页面即可看到最新数据。典型的轻应用类型
HTML + CSV 的组合可以搭建很多有用的轻量应用：
| 应用类型 | HTML 做什么 | CSV 做什么 |
|---|---|---|
| 个人工作台 | 展示待办、统计图表、录入表单 | 待办事项记录 |
| CRM 客户管理 | 客户列表、客户详情卡片 | 客户信息、跟进记录 |
| 任务看板 | 看板视图（待办/进行中/已完成列） | 任务记录 |
| 记账本 | 收支汇总、分类统计、趋势图 | 每笔收支记录 |
| 库存管理 | 库存列表、低库存预警 | 商品和库存数量 |
这些应用不需要开发后台、不需要数据库、不需要写接口。HTML 和 CSV 两个文件就是一个完整的轻应用。
两种场景
轻量发布适合的场景，大致可以分成两类。分清楚类型，能帮你判断该用哪种方式。
场景一：让信息好看
这类场景的核心需求是"展示"。一份报告、一篇评测、一个作品集——内容基本固定，数据很少变化，重点是把信息呈现得专业、美观。
- 典型产物：单页 HTML（报告、评测、作品集、个人介绍页）
- 数据特征：基本不变，或极少更新
- 技术方案：纯 HTML 发布即可，不需要 CSV
把这份季度复盘报告发布为在线链接。
页面包含：执行摘要、关键指标对比、重点项目进展、下季度计划。
风格简洁专业，适合直接发给管理层。场景二：让信息好用
这类场景的核心需求是"持续使用"。一个个人工作台、一个 CRM、一个任务看板——数据需要不断更新，页面是长期使用的工具而非一次性展示。
- 典型产物：HTML + CSV 组合（工作台、CRM、看板、记账本）
- 数据特征：频繁更新，需要追加和修改
- 技术方案：HTML 做展示层，CSV 做数据层
| 对比维度 | 让信息好看 | 让信息好用 |
|---|---|---|
| 核心需求 | 展示 | 持续使用 |
| 数据变化频率 | 基本不变 | 频繁更新 |
| 技术方案 | 纯 HTML | HTML + CSV |
| 典型产物 | 报告、评测、作品集 | 工作台、CRM、看板 |
| 更新方式 | 重新发布 | 改 CSV 后刷新页面 |
判断用哪种方式，问自己一个问题：这个页面做完之后，我还需要经常改里面的数据吗？如果不需要，选场景一；如果需要，选场景二。
使用建议
先本地预览，确认没问题再发布。 发布是不可逆的"让他人可见"操作。发布前在本地把页面完整看一遍：内容对不对、版式有没有错位、数据准不准。确认没问题再点发布。
数据型页面一定要用 CSV 分离。 如果你的页面包含表格数据、列表数据，务必用 CSV 存储而非写死在 HTML 里。写死的数据改起来要翻代码，CSV 改一个格子就行。这是最常见的"早做一步省后面十步"的决策。
链接不变是优势，善用它。 重新发布后链接不变，这意味着你可以把链接固定放在某个地方（群公告、邮件签名、海报二维码），以后更新内容只需要重新发布，不用换链接。
发布前检查数据口径。 如果页面引用了 CSV 数据，发布前确认 CSV 里的数据是最新版本。发布出去的页面会带上当前 CSV 的快照，后续改了 CSV 需要重新发布才能让在线页面更新。
用二维码覆盖线下场景。 在会议室投屏、海报、名片上放二维码，比让大家手动输链接方便得多。特别是开会时，台上投一个二维码，台下扫码就能看到当前汇报的完整数据。